<!--居中工具栏-->
<script setup lang="ts">
import ToolbarUser from "~/components/toolbar/ToolbarUser.vue";
import ThemeToggle from "~/components/common/ThemeToggle.vue";
import LoginDialog from "~/components/common/LoginDialog.vue"
import BaseConfig from "~/components/global/BaseConfig.vue";
import Logo from "~/components/common/Logo.vue";
import MenuBase from "~/components/ai/MenuBase.vue";

const {user,isLoginedIn} = storeToRefs(useAuthStore())
console.log('登录状态',isLoginedIn.value)
const {darkTheme} = storeToRefs(useCustomizeThemeStore())
// 控制历史记录显示和隐藏
const drawHistorySwitch = useState('drawHistorySwitch', () => false)
</script>

<template>
  <v-toolbar elevation="5" color="transparent" rounded="lg">
    <logo class="d-none d-sm-flex"/>
    <menu-base class="d-none d-sm-flex"/>
    <v-spacer></v-spacer>

    <!--搜索-->
<!--    <v-text-field-->
<!--        class="my-4 d-none d-sm-flex"-->
<!--        prepend-inner-icon="mdi-magnify"-->
<!--        variant="solo"-->
<!--        density="compact"-->
<!--        hide-details-->
<!--        rounded="full"-->
<!--    ></v-text-field>-->


    <v-spacer></v-spacer>
    <theme-toggle />
    <!--    未登录情况下显示登录按钮-->
    <base-config class="d-none d-sm-flex"/>

    <v-btn class="text-none" :color="darkTheme? 'white':'primary'" variant="text"
           @click="drawHistorySwitch=!drawHistorySwitch" stacked>
      <v-icon>mdi-history</v-icon>
    </v-btn>
<!--    登录或者头像按钮-->
    <login-dialog v-if="!isLoginedIn"/>
    <toolbar-user v-else/>
  </v-toolbar>
</template>

<style scoped lang="scss"></style>
